<template>
  <transition name="fade" appear>
    <div class="login-container">
    <div class="login-layout">
      <div class="left-panel">
        <h1>管理员系统</h1>
        <p>请使用管理员账号登录系统</p>
        <el-button class="sign-up-btn" @click="$router.push('/login')">普通用户登录</el-button>
      </div>
      <div class="right-panel">
        <h2>管理员登录</h2>

        <p class="subtitle">请输入管理员账号密码</p>
        <el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="login-form">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="管理员账号" :prefix-icon="User"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码" :prefix-icon="Lock" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin" :loading="loading" class="login-button">登录系统</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  </transition>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import request from '../utils/request'

const router = useRouter()
const loginFormRef = ref(null)
const loading = ref(false)

const loginForm = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const handleLogin = async () => {
  if (!loginFormRef.value) return
  
  try {
    await loginFormRef.value.validate()
    loading.value = true
    
    const res = await request({
      url: '/auth/login',
      method: 'post',
      data: loginForm
    })
    localStorage.setItem('token', res.data)
    if (!res.success){
      ElMessage.error(res.message)
      return
    }
    if (res.success) {
      const userInfo = await request({
        url: '/auth/info',
        method: 'get'
      })
      
      if (userInfo.data.role != 1) {
        throw new Error('您没有权限登录管理员系统')
      }
      
      localStorage.setItem('adminToken', userInfo.data)
      localStorage.setItem('adminUsername', loginForm.username)
      localStorage.setItem('isAdmin', 'true')
      localStorage.setItem('adminId', parseInt(userInfo.data.id))
      ElMessage.success('管理员登录成功')
      router.push('/admin/home')
    }
  } catch (error) {
    ElMessage.error(error.message || '登录失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
:root {
  --primary-color: #409EFF;
  --background-gradient: #f5f7fa;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow: auto;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--background-gradient);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin:0;
  padding:0;
  border:0
}

.login-container {
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  background: #f6f5f7;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.login-layout {
  width: 100%;
  max-width: 970px;
  height: 600px;
  display: flex;
  border-radius: 24px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  overflow: hidden;
  margin: auto;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .login-layout {
    flex-direction: column;
    height: auto;
    max-width: 90%;
    margin: 20px auto;
    border-radius: 16px;
  }

  .left-panel {
    flex: none;
    padding: 30px;
    border-radius: 24px 24px 0 0;
  }

  .left-panel h1 {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .left-panel p {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .right-panel {
    flex: none;
    padding: 20px;
    border-radius: 0 0 24px 24px;
  }

  .right-panel h2 {
    font-size: 24px;
  }

  .subtitle {
    font-size: 14px;
  }

  .login-form {
    max-width: 100%;
  }

  .login-button {
    height: 40px;
    font-size: 14px;
  }

  :deep(.el-input__inner) {
    height: 36px;
  }
}

/* 小屏幕手机适配 */
@media screen and (max-width: 375px) {
  .login-layout {
    max-width: 95%;
  }

  .left-panel h1 {
    font-size: 24px;
  }

  .left-panel p {
    font-size: 12px;
  }

  .right-panel h2 {
    font-size: 20px;
  }

  .subtitle {
    font-size: 12px;
  }
}

/* 横屏适配 */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .login-layout {
    height: 90vh;
    margin: 5vh auto;
  }

  .left-panel,
  .right-panel {
    padding: 20px;
  }

  .left-panel h1 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .left-panel p {
    margin-bottom: 10px;
  }

  .login-form {
    max-width: 100%;
  }
}

.left-panel {
  flex: 0.4;
  background: linear-gradient(to right, #FF6347, #FF4500);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  position: relative;
  overflow: hidden;
}

.left-panel h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

.left-panel p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 30px;
}

.sign-up-btn {
  background: transparent;
  border: 1px solid white;
  color: white;
  padding: 12px 45px;
  font-size: 16px;
  border-radius: 20px;
  text-transform: uppercase;
  transition: transform 0.3s ease;
}

.sign-up-btn:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.1);
}

.right-panel {
  flex: 1.2;
  background: white;
  padding: 60px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.right-panel h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #333;
}

.subtitle {
  color: #666;
  margin-bottom: 30px;
}

.login-form {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.login-button {
  width: 100%;
  height: 45px;
  font-size: 16px;
  background: linear-gradient(to right, #FF6347, #FF4500);
  border: none;
  border-radius: 20px;
  color: white;
  text-transform: uppercase;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(255, 69, 0, 0.4);
  background: linear-gradient(to right, #FF4500, #FF3300);
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 表单元素动画 */
.login-form .el-form-item {
  transition: transform 0.3s ease;
}

.login-form .el-form-item:hover {
  transform: translateX(5px);
}

.social-icon {
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

:deep(.el-input__wrapper) {
  background: #f8f9fa;
  border-radius: 20px;
  box-shadow: none !important;
  padding: 12px 15px;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper.is-focus) {
  background: white;
  box-shadow: 0 0 0 2px #FF6347 inset !important;
  transform: translateY(-1px);
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-input__inner) {
  height: 40px;
}

:deep(.el-input__prefix) {
  color: #666;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--primary-color) inset !important;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}
</style>